<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
	.area{
		position:absolute;
		border:1px solid orange;
		height:200px;
		width:100px;
	}
	.item{
		position:absolute;
		border:1px solid pink;
		height:100px;
		width:100px;
	}
	#areaA{
		top:50px;
		left:50px;
	}
	#areaB{
		top:150px;
		left:200px;
	}
	#areaC{
		top:50px;
		left:350px;
	}
	#areaD{
		top:10px;
		left:750px;
	}
	
	#itemA{
		top:500px;
		left:50px;
	}
	#itemB{
		top:650px;
		left:10px;
	}
	#itemC{
		top:800px;
		left:10px;
	}
	#itemD{
		top:1000px;
		left:100px;
	}
</style>
</head>
<body>
	<div class="area" id="areaA">Area A <br/>{50, 50}</div>
	<div class="area" id="areaB">Area B <br/>{150, 200}</div>
	<div class="area" id="areaC">Area C <br/>{50, 350}</div>
	<div class="area" id="areaD">Area D <br/>{10, 750}</div>
	
	<div class="item" id="itemA">Item A <br/>{500, 50}</div>
	<div class="item" id="itemB">Item B <br/>{650, 10}</div>
	<div class="item" id="itemC">Item C <br/>{800, 10}</div>
	<div class="item" id="itemD">Item D <br/>{1000, 100}</div>

</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
	.area{
		position:absolute;
		border:1px solid orange;
		height:200px;
		width:100px;
	}
	.item{
		position:absolute;
		border:1px solid pink;
		height:100px;
		width:100px;
	}
	#areaA{
		top:50px;
		left:50px;
	}
	#areaB{
		top:150px;
		left:200px;
	}
	#areaC{
		top:50px;
		left:350px;
	}
	#areaD{
		top:10px;
		left:750px;
	}
	
	#itemA{
		top:500px;
		left:50px;
	}
	#itemB{
		top:650px;
		left:10px;
	}
	#itemC{
		top:800px;
		left:10px;
	}
	#itemD{
		top:1000px;
		left:100px;
	}
</style>
</head>
<body>
	<div class="area" id="areaA">Area A <br/>{50, 50}</div>
	<div class="area" id="areaB">Area B <br/>{150, 200}</div>
	<div class="area" id="areaC">Area C <br/>{50, 350}</div>
	<div class="area" id="areaD">Area D <br/>{10, 750}</div>
	
	<div class="item" id="itemA">Item A <br/>{500, 50}</div>
	<div class="item" id="itemB">Item B <br/>{650, 10}</div>
	<div class="item" id="itemC">Item C <br/>{800, 10}</div>
	<div class="item" id="itemD">Item D <br/>{1000, 100}</div>

</body>
</html>